<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>新闻资讯</title>
  <!-- 分页组件基于jQuery -->
  <link rel="stylesheet" href="../assets/css/news.css">
  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  <!-- <link href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.css" rel="stylesheet"> -->
  <script src="../assets/js/pagination.js"></script>
  <style>
    * {
      padding: 0;
      margin: 0;
    }
  </style>
</head>

<body>
  <!-- 头部 -->
  <div class="header">
    <img class="img1" src="../assets/img/logo.png" alt="">
    <div>
      <img class="img2" src="../assets/img/more.png" alt="">
      <ul class="menu">
        <a href="../index.html">
          <li>首页</li>
        </a>
        <a href="./news.html">
          <li>新闻资讯</li>
        </a>
        <a href="./download.html">
          <li>软件下载</li>
        </a>
        <a href="./cooperation.html">
          <li>合作加盟</li>
        </a>
        <a href="./upload.html">
          <li>上传题库</li>
        </a>
        <a href="./problem.html">
          <li>常见问题</li>
        </a>
      </ul>
    </div>

  </div>
  <!-- info图片 -->
  <div class="info-img">
    <img src="../assets/img/info.png" alt="">
  </div>
  <!-- 新闻资讯 -->
  <div class="info">
    <div class="item">
      <div class="item-left">
        <p>25</p>
        <span class="font">2018-12</span>
        <!-- <span class="soild"></span> -->
        <span class="font">考试资讯</span>
      </div>
      <div class="item-right">
        <p>2018年度经济专业技术资格考试成绩已发布</p>
        <div>
          <button onclick="jump_details()">查看更多</button>
        </div>
      </div>
    </div>

    <div class="item">
      <div class="item-left">
        <p>25</p>
        <span class="font">2018-12</span>
        <!-- <span class="soild"></span> -->
        <span class="font">考试资讯</span>
      </div>
      <div class="item-right">
        <p>2018年度经济专业技术资格考试成绩已发布</p>
        <div>
          <button>查看更多</button>
        </div>
      </div>
    </div>

    <div class="item">
      <div class="item-left">
        <p>25</p>
        <span class="font">2018-12</span>
        <!-- <span class="soild"></span> -->
        <span class="font">考试资讯</span>
      </div>
      <div class="item-right">
        <p>2018年度经济专业技术资格考试成绩已发布</p>
        <div>
          <button>查看更多</button>
        </div>
      </div>
    </div>

    <div class="item">
      <div class="item-left">
        <p>25</p>
        <span class="font">2018-12</span>
        <!-- <span class="soild"></span> -->
        <span class="font">考试资讯</span>
      </div>
      <div class="item-right">
        <p>2018年度经济专业技术资格考试成绩已发布</p>
        <div>
          <button>查看更多</button>
        </div>
      </div>
    </div>
  </div>
  <!-- 翻页导航 -->
  <div class="page-container"></div>
  <!-- 页尾 -->
  <div class="footer">
    <!-- <div> -->
    <!-- <ul>
          <li><a href="">首页 |</a></li>
          <li><a href="">新闻资讯 |</a></li>
          <li><a href="">关于我们 |</a></li>
          <li><a href="">软件下载 |</a></li>
          <li><a href="">合作加盟 |</a></li>
          <li><a href="">上传题库 </a></li>
        </ul> -->
    <p>©题库专家 版权所有 蜀IPC备13072511号</p>
    <!-- </div> -->
  </div>
  <script src="../assets/js/util.js"></script>
  <!-- 分页 -->
  <script>
    const pageSize = 4
    const dataCount = 16
    const pager = new Pagination('.page-container', {
      pageSize: pageSize,
      autoLoad: true,
      toPage: function (index, _pageSize) {
        // 设置记录总数，用于生成分页HTML内容
        if (index === 0 || _pageSize) this.updateCount(dataCount, _pageSize)

        // 根据页码以及分页大小生成html内容
        let pageListHtml = ''
        for (var i = 0; i < (_pageSize || pageSize); i++) {
          pageListHtml += `
            <div class="col-md-3">
              <div class="card">
                <div class="card-body">
                  <h5 class="card-title">Card - ${index * (_pageSize || pageSize) + i + 1}</h5>
                  <p class="card-text">card-text,card-text,card-text,card-text</p>
                </div>
              </div>
            </div>
          `
        }
        $('.page-list').html(pageListHtml)
      }
    })
  </script>
  <!-- 跳转 -->
  <script>
    function jump_details() {
      location.href = 'details.html';
    }
  </script>
</body>

</html>